<template>
    <div class="load">
        <div v-if="!isError">
            <div class="icon">
                <img class="img" width="50" height="50" src="./loading.gif">
            </div>
            <p class="msg">{{loadingMsg}}</p>
        </div>
        <div @click="refresh" v-else>
            <i class="icon iconfont icon-load-err"></i>
            <p class="msg">{{errorMsg}}</p>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    const LOAD_REFRESH_EVENT = 'loadRefresh'
    export default {
        props: {
            isError: {
                type: Boolean,
                default: false
            },
            loadingMsg: {
                type: String,
                default: '正在载入...'
            },
            errorMsg: {
                type: String,
                default: '加载失败！点击刷新重试。'
            }
        },
        methods: {
            refresh() {
                this.$emit(LOAD_REFRESH_EVENT)
            }
        }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    .load
        width: 100%
        text-align: center
        .icon
            display: block
            margin-bottom: 20px
            font-size: 55px
            color: $color-text-ld
        .msg
            line-height: 20px
            font-size: $font-size-medium
            color: $color-text-d
</style>